//1. 公用样式
require('../../assets/css/index.less');
require('../../assets/css/basic.less');
require('../../assets/fonts/iconfont.css');


//2. 当前页面样式
require('./course.less');

//3. 公用js
let dom = require('../../utils/dom.js');
let local = require('../../utils/local.js');
let https = require('../../utils/https.js')

//4. 当前页面的js
// console.log(dom);

dom.ready(function () {
    // 调用页脚
    dom.bMenu('run')
    // 调用顶部菜单
    dom.hMenu('course')

    // 获取课程列表数据
    function getCourse() {
        // 1.获取数据
        https.get('/api/train/courseList', {}, function (res) {
            // console.log(res);
            if (res.errno == 0) {
                res.data.forEach(function (v, i) {
                    console.log(v,i);
                    // 判定i表示放在哪里
                    if (i == 0) {   //最新课程

                        // 方式一：用a标签实现AB页面传参
                        // newCourse.innerHTML = `
                        // <li id="newCourse">
                        //     <p class="db CourseTxt">最新课程 </p>
                        //     <div class="new-course mt10">
                        //         <a href="../courseintro.html?${v.courseId}" class="db pb mb mr">
                        //             <img src="http://47.96.154.185:3701${v.imgurl}" alt="">
                        //             <h3 class="f14  pl">${v.name}</h3>
                        //             <p class="f12 pl mt10">${v.desc}</p>
                        //         </a>
                        //     </div>
        
                        // </li>
                        // `

                        // 方式二：
                        newCourse.innerHTML = `
                        <li id="newCourse" >
                            <p class="db CourseTxt">最新课程 </p>
                            <div class="new-course mt10" >
                                <a class="db pb mb mr">
                                    <img data-id="${v.courseId}" src="http://47.96.154.185:3701${v.imgurl}" alt="">
                                    <h3 class="f14  pl">${v.name}</h3>
                                    <p class="f12 pl mt10">${v.desc}</p>
                                </a>
                            </div>
        
                        </li>
                        `
                    } else {  //下面的其他课程
                        courseList.innerHTML += `
                        <li class="course-list mt10" >
                        <a  class="db rel mr mt10">
                            <img data-id="${v.courseId}" src="http://47.96.154.185:3701${v.imgurl}" alt="">
                            <div class="course-text abs">
                                <h3 class="f14">${v.name}</h3>
                                <p class="f12 mt10">${v.desc}</p>
                            </div>
                        </a>
            </li>
                        `
                    }

                });
            }
        })
    }
    getCourse()


    // 方式二：使用js跳转来传参数
    newCourse.addEventListener('click',function(event){
        console.log(event);
        console.log(event.target.dataset);
        // 方式二：使用js的方式实现跳转传参数---传统小项目使用最多
        // 获取当前列表的id
        let id = event.target.dataset.id;

        // // js跳转
        // location.href='/courseintro.html?'+id


        // 方式三：本地存储来实现传参数--高级玩法--后期使用最多，处理大批量数据
        local.set('courseId',id);
        // js跳转
        location.href='courseintro.html'

    })



    courseList.addEventListener('click',function(event){
        console.log(event);
        console.log(event.target.dataset);
        // 方式二：使用js的方式实现跳转传参数---传统小项目使用最多
        // 获取当前列表的id
        let id = event.target.dataset.id;

        // // js跳转
        // location.href='/courseintro.html?'+id


        // 方式三：本地存储来实现传参数--高级玩法--后期使用最多，处理大批量数据
        local.set('courseId',id);
        // js跳转
        location.href='courseintro.html'

    })
 
 




})

